<template>
	<gracePage >
		<view slot="gHeader" class="grace-bg-white" >
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">查看物流</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" class="">
			<!-- 循环订单商品 -->
			<view class="mx-3 my-2">
				<view class="grace-list-items">
					<view class="grace-order-goods-img">
						<image class="grace-order-goods-img" :src="info.goods_img" mode="widthFix"></image>
					</view>
					<view class="grace-list-body">
						<view class="grace-list-title-text">物流状态 <text class="main-font-color pl-1">{{info.status_text}}</text></view>
						<view class="grace-list-body-desc">快递公司：{{info.shipping_name}}</view>
						<view class="grace-list-body-desc">快递单号：{{info.invoice_no}}</view>
					</view>
				</view>
			</view>
			<divider></divider>
			<view class="mx-3 mt-2">
				<block v-for="(item, index) in logister.data" :key="index">
					<view class="grace-time-line grace-nowrap grace-flex-end">
						<view class="grace-time-line-face" :class="{'main-font-color':index == 0}">{{item.status}}</view>
						<view class="grace-time-line-body">
							<text class="grace-time-line-txt " :class="{'main-font-color':index == 0}">{{item.context}}</text>
							<text class="grace-time-line-time grace-gray">{{item.time}}</text>
						</view>
					</view>
				</block>
			</view>
		
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
export default {
	data() {
		return {
			menuShow: false,
			orderId: 0,
			info:{},
			logister:{}
		};
	},
	onLoad(e) {
		
		this.orderId = e.orderId;
		this.__init();
	},
	methods: {
		async __init() {
			let options = {
				act: 'get_physical',
				order_id: this.orderId
			}, optionsInfo = {
				act: 'get_info',
				order_id: this.orderId
			};
			let dataInfo = await this.$HTTP.post('/api/api.php', optionsInfo, { token: true });
			let data = await this.$HTTP.post('/api/api.php', options, { token: true });
			console.log('dataInfo',dataInfo)
			this.info = dataInfo.info;
			this.logister = data;
			console.log('data',data)
			
		}
	},
	components: {
		gracePage
	}
};
</script>
<style scoped>
.grace-order-goods-img{width:154rpx; height:154rpx;}
.grace-time-line {
	position: relative;
}
.grace-time-line-face {
	width: 100rpx;
	height: 40rpx;
	line-height: 40rpx;
	background: #FFFFFF;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
}

.grace-time-line-body {
	width: 600rpx;
	border-left: 1rpx solid #f6f7f8;
	font-size: 0;
	padding-bottom: 20rpx;
	padding-left: 60rpx;
}
.grace-time-line-txt {
	line-height: 40rpx;
	font-size: 26rpx;
	display: block;
	/* background-color: #f8f8f8; */
	padding: 20rpx 20rpx 0rpx 20rpx;
}
.grace-time-line-time {
	line-height: 36rpx;
	font-size: 22rpx;
	display: block;
	text-align: left;
	margin-top: 3px;
	padding-left: 20rpx;
}
.grace-time-line-image {
	width: 600rpx;
}
</style>
